<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var rexp = /^[0-9a-zA-Z]{3,20}@[0-9a-zA-Z]{2,10}[.](com|cn|net)$/;
        // var x = "adsfqq.com";
        //
        // //判断字符串是否匹配正则表达式
        // console.log(rexp.test(x));

        function checkName(){
            return checkFormElement(/^[a-zA-Z]{2,20}$/,'userName','nameSpan','姓名必须为2-20字母');
        }

        function checkPwd(){
            return checkFormElement(/^\d{6}$/,'pwd','pwdSpan','密码必须是6位数字');
        }

        function checkEmail(){
            return checkFormElement(/^[0-9a-zA-Z]{3,20}@[a-zA-Z0-9]{2,10}[.](com|cn|net)$/,
                'email','emailSpan','邮箱格式为XX@XX.com');
        }

        function checkPhone(){
            return checkFormElement(/^1[3578]\d{9}$/,'phone','phoneSpan','电话只能以13、15、17、18、19开始的11位数');
        }

        function checkBirthday(){
            return checkFormElement(/^(19|20)\d{2}-\d{2}-\d{2}$/,'birthday','birthdaySpan','生日格式为XXXX-XX-XX');
        }

        function checkFormElement(rexp,textId,spanId,errorInfo){
            if(rexp.test($(textId).value)){
                $(spanId).innerHTML = "验证通过";
                $(spanId).style.color = "green";
                return true;
            }
            else{
                $(spanId).innerHTML = errorInfo;
                $(spanId).style.color = "red";
                return false;
            }
        }

        function formSubmit(){
            if(checkName() & checkEmail() & checkBirthday() & checkPwd() & checkPhone()){
                //提交表单
                $('f1').submit();
            }
        }

        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<form action="add" id="f1">
    姓名：<input type="text" name="userName" id="userName" onblur="checkName()">
    <span id="nameSpan"></span><br>
    密码：<input type="password" name="pwd" id="pwd" onblur="checkPwd()">
    <span id="pwdSpan"></span><br>
    邮箱：<input type="text" name="email" id="email" onblur="checkEmail()">
    <span id="emailSpan"></span><br>
    电话：<input type="text" name="phone" id="phone" onblur="checkPhone()">
    <span id="phoneSpan"></span><br>
    生日：<input type="text" name="birthday" id="birthday" onblur="checkBirthday()">
    <span id="birthdaySpan"></span><br>
    <input type="button" value="提交" onclick="formSubmit()">

</form>
</body>
</html>